{% extends "pygem.html" %}
{% import 'courseeditor.html' as courseeditor %}
{% block browserpane %}
<script>
	var globaldepartments;
	$(document).ready(
		function()
		{
			console.log('ready!');
			$.get('api/v1.0/departments', function(data, status)
			{
				console.log(data);
				globaldepartments = data['departments']
				$departmentslist = $('<ul id="departmentsmenu"></ul>');
				$.each(globaldepartments, function(i, department)
				{
					$departmentslist.append('<li id="d_' + i + '">');
				}
				);
				console.log('deps list = ' + $departmentslist);
			});
		});
	var departments = {{departments|tojson|safe}}

	$(function()
	{
		$( "#departmentsmenu" ).menu(
		{
			select:function(event, ui)
			{
				console.log(ui.item.attr('id'));
				$('#courseeditorform').html(renderCourseEditorForm(ui.item));
			}
		});
	});
	function renderCourseEditorForm(item)
	{
		id = item.attr('id')
		switch(id[0])
		{
			case 'd':
				return renderDepartmentForm(id.substring(2));
				break;
			case 's':
				departmentid = item.parents('li').attr('id')
				console.log('parent dep = ' + departmentid)
				return renderScienceDomainForm(id.substring(2), departmentid.substring(2));
				break;
			case 'c':
				return renderCourseForm(id.substring(2));
				break;
			default:
				break;
		}
	}

	function renderDepartmentForm(id)
	{
		$form = $('<form></form>');
		$form.append('<input type="text" value="' + departments[id].departmenttitle + '">')
		$form.append('<input type="button" value="{{_('save department')}}">')
		return $form
	}

	function renderScienceDomainForm(id, departmentid)
	{
		$form = $('<form></form>')
		$form.append('<input type="text" value="' + departments[departmentid].departmenttitle + '">')
		$form.append('<br>')
		$form.append('<input type="text" value="' + departments[departmentid]['sciencedomains'][id].sciencedomaintitle + '">')
		$form.append('<input type="button" value="{{_('save sciencedomains')}}">')
		return $form
	}

	function renderCourseForm(id)
	{
		return 'Not implemented!'
	}
</script>
<style>
	.ui-menu {width: 250px; border:1px solid; border-radius:5px; padding:5;}
	.ui-widget {font-size:80%;}
	.ui-menu .ui-menu-item { margin: 0; padding: 5; zoom: 1; width: 100%; border:1px solid; border-radius:5px;}
</style>

<ul id="departmentsmenu">
	{% for departmentid, department in departments.items() -%}
		<li id="d_{{department.departmentid}}">
			<a href="#">{{department.departmenttitle}}</a>
			<ul>
			{% for sciencedomainid, sciencedomain in department['sciencedomains'].items() -%}
				<li id="s_{{sciencedomain.sciencedomainid}}">
					<a href="#" id="sd_{{sciencedomain.sciencedomainid}}">{{sciencedomain.sciencedomaintitle}}</a>
					<ul>
						{% for courseid, course in sciencedomain['courses'].items() %}
							<li id="c_{{course.courseid}}">
								<a href="#">{{course.coursetitle}}</a>
							</li>
						{% endfor %}
					</ul>
				</li>
			{% endfor %}
			</ul>
		</li>
	{% endfor %}
</ul>
{% endblock %}
{%block mainpane%}
	<div id="courseeditorform">
	</div>
{%endblock%}
